<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<style>
    table tr th, table tr td {
        border: #000000 1px solid;
        text-align: center;
        vertical-align: middle;
        font-size: 16px;
        line-height: 30px
    }

    table tr td input {
        border: none;
        width: 100%;
        height: 30px;
        outline: none;
        text-align: center;
    }

    table tr td textarea {
        border: none;
        width: 100%;
        height: 30px;
        outline: none;
        resize: none;
        overflow-y:hidden;
    }

    .changeCursorIco {
        cursor: pointer;
    }
</style>
<body class="hold-transition skin-yellow sidebar-mini">
<!--参与部门  模态框-->
<div class="modal fade" id="modal-canYuRen-select">
    <div class="modal-dialog" style="width:800px;height: 1000px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">选择部门</h4>
            </div>
            <div class="modal-body">
                <form id="branchForm">
                    <div>
                        <button type="button" style="margin-bottom: 5px" class="btn btn-info pull-left"
                                id="btn-submit-CanYuRen1">添加
                        </button>
                        <table class="table table-bordered" id="bootstrap-table1"></table>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<section class="content-header">
    <h1>计划变更</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-body">
                    <div class="col-md-12">
                        <button class="btn btn-default pull-right" style="margin: 10px;width: 82px;"
                                onclick="javascript:window.close()" type="button">关闭
                        </button>
                        <button id="btn_save" class="btn btn-success pull-right" style="margin: 10px;width: 82px;" shiro:hasPermission="pro:equipment:edit"
                                th:data-prodOrdNo="${prodOrd.prodNo}"  onclick="save(this)" type="button">保存
                        </button>
                    </div>
                    <div class="col-md-10 col-md-offset-1">
                        <form id="dataForm">
                            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td style="border: none"></td>
                                    <td colspan="8"
                                        style="font-size: 20px;height: 35px">
                                        <B th:text="${tableTitle}"></B>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="border: none"></td>
                                    <td style="width: 100px;">项目编号</td>
                                    <td style="width:200px;" th:text="${prodOrd.prodNo}"></td>
                                    <td style="width:200px;">项目名称</td>
                                    <td colspan="2" th:text="${prodOrd.prodName}"></td>
                                    <td style="width:200px;">数量</td>
                                    <td colspan="2" th:text="${prodOrd.prodNum}"></td>
                                </tr>
                                <tr>
                                    <td style="border: none"></td>
                                    <td>安装地点</td>
                                    <td th:text="${prodOrd.insSite}"></td>
                                    <td>需方</td>
                                    <td colspan="2" th:text="${prodOrd.customer}"></td>
                                    <td>交货时间</td>
                                    <td colspan="2" th:text="${#dates.format(prodOrd.prodDelDat, 'yyyy-MM-dd')}"></td>
                                </tr>
                                <tr>
                                    <td style="border: none"></td>
                                    <td colspan="8"
                                        style="font-size: 20px;height: 35px">
                                        <B>项目排产</B>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="border: none"></td>
                                    <td>序号</td>
                                    <td>任务名称</td>
                                    <td>计划开始时间</td>
                                    <td style="width:200px;">计划完成时间</td>
                                    <td>所属部门</td>
                                    <td>派工工时</td>
                                    <td>备注</td>
                                    <td>变更原因</td>
                                </tr>
                                <tr th:if="${prodPlaDetList.size() > 0 }" th:id="${item.prpdCod}" th:each="item:${prodPlaDetList}">
                                    <td th:if="${item.prpdCod=='p02' or item.prpdCod=='p05' or item.prpdCod=='p09' or item.prpdCod=='p14'}" style="border: none;color: red;font-weight: bold;font-size: 23px;">*</td>
                                    <td th:if="${item.prpdCod!='p02' and item.prpdCod != 'p05' and item.prpdCod!='p09' and item.prpdCod!='p14'}" style="border: none"></td>
                                    <td th:text="${itemStat.count}"></td>
                                    <td>
                                        <input name="prpdNam" type="text" readonly="readonly" autocomplete="off"
                                               th:value="${item.prpdNam}"/>
                                        <input name="prpdCod" type="hidden" style="display: none" readonly="readonly"
                                               th:value="${item.prpdCod}"/>
                                        <input name="prpdOrdNo" type="hidden" style="display: none" readonly="readonly"
                                               th:value="${item.prpdOrdNo}"/>
                                        <input name="prpdId" type="hidden" style="display: none" readonly="readonly"
                                               th:value="${item.prpdId}"/>
                                    </td>
                                    <td>
                                        <input name="prpdPlaStaDat"
                                               style="background:#FEFFC3;"
                                               type="text"
                                               class="datepicker changeCursorIco"
                                               readonly="readonly"
                                               alt="点击选择开始时间"
                                               th:value="${#dates.format(item.prpdPlaStaDat, 'yyyy-MM-dd')}"
                                               onchange="verificationStart(this)"/>
                                    </td>
                                    <td>
                                        <input name="prpdPlaEndDat"
                                               style="background:#FEFFC3;"
                                               type="text"
                                               class="datepicker changeCursorIco"
                                               readonly="readonly"
                                               alt="点击选择结束时间"
                                               th:value="${#dates.format(item.prpdPlaEndDat, 'yyyy-MM-dd')}"
                                               onchange="verificationEnd(this)"/>
                                    </td>
                                    <td>
                                       <span th:id="${dept+'#deptId_'+itemStat.count}"
                                             th:each="dept : ${#strings.listSplit(item.prpdDepId,',')}"
                                             style="display: block" >
                                                <span th:text="${dept}"></span>
                                                <span class="out-del" style="cursor:pointer;"
                                                      th:sn="${'#deptId_'+itemStat.count}" title="删除">
                                                    <i class="fa fa-remove text-red"></i>
                                                </span>
                                        </span>
                                        <span class="out-add"
                                              th:sn="${'deptId_'+itemStat.count}"
                                              th:id="${'out-add_'+itemStat.count}" title="添加"
                                              style="
                                                     text-align: right;
                                                     margin-left: 20px;
                                                     cursor:pointer;
                                                    ">
                                                    <i class="fa fa-plus text-green">

                                                    </i>
                                        </span>
                                        <input th:id="${'deptId_'+itemStat.count}" name="prpdDepId" placeholder="参与科室"
                                               type="hidden" th:value="${item.prpdDepId}">
                                    </td>
                                    <td>
                                        <input name="prpdAssWorHours" type="text" style="background:#FEFFC3;outline:none;text-align: center;"
                                               th:value="${#strings.defaultString(item.prpdAssWorHours,'')}"/>
                                    </td>
                                    <td>
                                        <textarea style="background:#FEFFC3;width: 100%;height: 100%" name="prpdRem" th:text="${#strings.defaultString(item.prpdRem,'')}" maxlength="255"></textarea>
                                    </td>
                                    <td>
                                        <textarea style="background:#FEFFC3;width: 100%;height: 100%" name="prpdChaRea" maxlength="255" placeholder="请输入变更原因"></textarea>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var xinZeng = "xinZeng";
    var canYuCount = 0; //每次添加参与部门  计数+1   删除参与人计数-1   用此判断是否添加了部门
    //当前控件ID
    var currentDeptControlId = "";
    //添加的ID
    var addId = "";
    /**
     * Jquery 就绪函数
     */
    $(function (){
        loadDesignInfo();
        /**增加参与部门*/
        $('#dataForm').on('click', '.out-add', function () {
            currentDeptControlId = "#" + $(this).attr("sn");
            addId = "#" + $(this).attr("id");
            js.modal.open("modal-canYuRen-select");
            loadDepts();
        });
        /**移除参与部门*/
        $('#dataForm').on('click', '.out-del', function () {
            //找到要删除的人的 父级 span  id
            var canYuBranchName = $(this).parent().attr('id');
            //删除隐藏input中 branchid
            var delCanYuBranchName = "";
            if (canYuBranchName.indexOf(xinZeng) != -1) {
                delCanYuBranchName = canYuBranchName.slice(7);
            } else {
                delCanYuBranchName = canYuBranchName;
            }
            delCanYuBranchName = delCanYuBranchName.substring(0, delCanYuBranchName.indexOf("#"));

            var idValue = $($(this).attr("sn")).val();
            var BranchIdList = idValue.split(",");
            for (let i = 0; i < BranchIdList.length; i++) {
                if (BranchIdList[i] === delCanYuBranchName) {
                    BranchIdList.splice(i, 1);
                }
            }
            $($(this).attr("sn")).val(BranchIdList.toString());
            canYuCount--;//每次添加参与人  计数+1   删除参与人计数-1   用此判断是否添加了参与部门
            //删除部门 span
            var box = document.getElementById(canYuBranchName);
            box.remove();
        });
        /**添加参与部门*/
        $("#btn-submit-CanYuRen1").click(function () {
            var branchNameList = $(currentDeptControlId).val();
            var branchNameListArray = branchNameList.split(",");
            $('input[name="checkbox_select"]:checkbox:checked').each(function (i, value, id) {
                var branchName = $(this).attr("id");
                for (let j = 0; j < branchNameListArray.length; j++) {
                    if (branchNameListArray[j] === branchName) {
                        js.modal.alert("请勿重复添加！");
                        return;
                    }
                }
                add(branchName);
            });
            js.modal.hide('modal-canYuRen-select');
        });
    });
    /**
     * @Description: 添加部门
     * @Author: wsg
     **/
    function add(branchName) {
        var xinZengClass = xinZeng + branchName;
        //参与人后添加 人名和叉号
        $(addId).before(`
              <span id="` + xinZengClass + currentDeptControlId + `" style="display: block">` + branchName + `<span class="out-del" style="cursor:pointer;" sn="` + currentDeptControlId + `" title="删除" ><i class="fa fa-remove text-red"></i> </span></span>
            `);
        //隐藏input框填 科室id  用 ，分隔
        var temp1 = $(currentDeptControlId).val();
        var temp2 = temp1 + "," + branchName;
        if (temp1 === null || temp1 === "" || temp1 === undefined) {
            $(currentDeptControlId).val(temp2.slice(1));
        } else {
            $(currentDeptControlId).val(temp2);
        }
        js.modal.hide("modal-canYuRen-select")
        canYuCount++; //每次添加参与人  计数+1   删除参与人计数-1   用此判断是否添加了部门
    }

    function loadDepts() {
        /** 加载部门列表 */
        $('#bootstrap-table1').bootstrapTable('destroy');
        table1 = js.table.init({
            id: "bootstrap-table1",
            url: ctx + 'task/scheduling/getDeptList2',
            showColumns: false,
            showExport: false,
            pageSize: 300,
            pagination: false,
            columns: [
                {
                    title: '<input class="checkboxAll"  type="checkbox" onclick="selectedAll()" >', width: '40',
                    formatter: function (value, row, index) {
                        return '<input class="checkbox_select"  type="checkbox" name= "checkbox_select" ' +
                            'value= "' + $('<div/>').text(row.id).html() + '" id="' + $('<div/>').text(row.name).html() + '"    >';
                    }
                },
                {
                    title: '序号', field: 'id', width: '50',
                    formatter: function (value, row, index, field) {
                        return index + 1;
                    }
                },
                {title: "部门名称", field: 'name'}
            ]
        });
    }

    /**
     * 验证当结束时间是否大于开始时间
     */
    function verificationStart(obj) {
        let startVal = $(obj).val();
        let endVal =  $(obj).parent().parent().find("[name='planEndTime']").val();
        if(startVal!=undefined && endVal != undefined){
            let start = new Date(startVal);
            let end = new Date(endVal);
            if(end<=start){
                $(obj).val('');
                js.modal.warning("尊敬的用户，您所输入的开始时间必须大于结束时间！");
            }
        }
    }
    /**
     * 验证当结束时间是否大于开始时间
     */
    function verificationEnd(obj) {
        let endVal = $(obj).val();
        let startVal =  $(obj).parent().parent().find("[name='planStartTime']").val();
        if(startVal!=undefined && endVal != undefined){
            let end = new Date($(obj).val());
            let start = new Date($(obj).parent().parent().find("[name='planStartTime']").val());
            if(end<=start){
                $(obj).val('');
                js.modal.warning("尊敬的用户，您所输入的结束时间必须大于开始时间！");
            }
        }
    }
    /**
     *全选
     */
    function selectedAll() {
        if ($('.checkboxAll').is(":checked")) {
            $('.checkbox_select').each(function () {
                this.checked = true;
            });
        } else {
            $('.checkbox_select').each(function () {
                this.checked = false;
            });
        }
    }
    /**
     * 保存
     * @param obj
     */
    function save(obj) {
        let dataArray = new Array();
        let dataModel = new Object();
        let valIsLock = true;
        $.each($("#dataForm").serializeArray(), function (_, kv) {
            if (kv.name === 'prpdNam') {
                dataModel.prpdNam = kv.value;
            }
            if (kv.name === 'prpdCod') {
                dataModel.prpdCod = kv.value;
            }
            if (kv.name === 'prpdOrdNo') {
                dataModel.prpdOrdNo = kv.value;
            }
            if (kv.name === 'prpdPlaEndDat') {
                if (kv.value != "") {
                    dataModel.prpdPlaEndDat = kv.value;
                } else {
                    dataModel.prpdPlaEndDat = null;
                    if (dataModel.prpdCod == 'p02' || dataModel.prpdCod == 'p05' || dataModel.prpdCod == 'p09' || dataModel.prpdCod == 'p14') {
                        if (dataModel.prpdPlaEndDat == null) {
                            valIsLock = false;
                        }
                    }
                }
            }
            if (kv.name === 'prpdPlaStaDat') {
                if(kv.value!=""){
                    dataModel.prpdPlaStaDat = kv.value;
                }else{
                    dataModel.prpdPlaStaDat = null;
                }
            }
            if (kv.name === 'prpdDepId') {
                if(kv.value!=""){
                    dataModel.prpdDepId = kv.value;
                }else{
                    dataModel.prpdDepId = null;
                }
            }
            if (kv.name === 'prpdAssWorHours') {
                if (kv.value != "") {
                    dataModel.prpdAssWorHours = kv.value;
                } else {
                    dataModel.prpdAssWorHours = null;
                }
            }
            if (kv.name === 'prpdRem') {
                if(kv.value!=""){
                    dataModel.prpdRem = kv.value;
                }else{
                    dataModel.prpdRem = null;
                }
            }
            if (kv.name === 'prpdChaRea') {
                if(kv.value!=""){
                    dataModel.prpdChaRea = kv.value;
                }else{
                    dataModel.prpdChaRea = null;
                }
                dataModel.prpcOs=xyh.getOS();
                dataModel.prpcBrowser=xyh.getBrowser();
                if (dataModel.prpdNam != undefined) {
                    dataArray.push(dataModel);
                    dataModel = new Object();
                }
            }
        });
        if(valIsLock==false){
            js.modal.warning("必填项（红色*）的计划结束时间未填写！");
            return;
        }
        js.post({
            url: ctx + 'task/scheduling/saveSchedulingPlan',
            type: 'post',
            traditional: true,            // 阻止深度序列化， 使参数可以使用数组
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded",
            data: {
                prodNo:$(obj).attr('data-prodOrdNo'),
                prodPlanListJson:JSON.stringify(dataArray)
            },
            async: true,                // 异步执行
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    window.opener.reloadTable();
                    window.open('','_self');
                    window.close();
                } else {
                    js.modal.warning(result.msg);
                }
            },
            error: function () {
                js.modal.fail();
            }
        });
        // js.modal.confirm('尊敬的用户，您确定要保存设备类项目排产计划吗？', function () {
        //     js.post({
        //         url: ctx + 'task/scheduling/saveSchedulingPlan',
        //         type: 'post',
        //         traditional: true,            // 阻止深度序列化， 使参数可以使用数组
        //         dataType: 'json',
        //         contentType: "application/x-www-form-urlencoded",
        //         data: {
        //             prodNo:$(obj).attr('data-prodOrdNo'),
        //             prodPlanListJson:JSON.stringify(dataArray)
        //         },
        //         async: true,                // 异步执行
        //         success: function (result) {
        //             if (result.type === web_status.SUCCESS) {
        //                 js.modal.success(result.msg);
        //                 window.opener.reloadTable();
        //                 window.open('','_self');
        //                 window.close();
        //             } else {
        //                 js.modal.warning(result.msg);
        //             }
        //         },
        //         error: function () {
        //             js.modal.fail();
        //         }
        //     });
        // });
    }

    /**
     * 获取设计信息
     */
    function loadDesignInfo(){
        js.post({
            url: ctx + 'task/scheduling/loadDesignInfo',
            type: 'post',
            traditional: true,            // 阻止深度序列化， 使参数可以使用数组
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded",
            data: {
                prodNo:$("#btn_save").attr('data-prodOrdNo')
            },
            async: true,                // 异步执行
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    $("#p00 [name='planEndTime']").val(result.data.completeDate);
                }
            },
            error: function () {
                js.modal.fail();
            }
        });
    }
</script>
</body>
</html>